<template>
  <div>
    <el-form ref="form"
             :disabled="seeFlag"
             :model="form"
             label-width="135px"
             size="small"
             inline
             label-suffix="："
             :rules="rules">
      <div class="box-title">箱信息</div>
      <el-form-item label="箱号"
                    prop="cntrno">
        <el-input v-model="form.cntrno"
                  placeholder="请填写"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="持箱人"
                    prop="cstCopercd">
        <el-select v-model="form.cstCopercd"
                   @change="cstCopercd"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
          <el-option :label="item.relationTenantName"
                     :value="item.relationTenantId"
                     v-for="item,index in dataList.cstCoperList"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="箱型"
                    prop="ctypecd">
        <el-select  clearable style="width: 150px" size="small"
                    v-model="form.typeSize" @change="ctypecd" placeholder="请选择船公司箱型">
          <el-option  :label="item.containerType+'/'+item.containerSize" :value="[item.containerType,item.containerSize]"  
          v-for="item,index in dataList.boxList" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="箱ISO"
                    prop="isocd">
              <el-input v-model="form.isocd"
                  placeholder="请填写"
                  disabled
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="铅封号"
                    prop="sealno">
        <el-input v-model="form.sealno"
                  placeholder="请填写"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="箱货总重（吨）"
                    prop="cweight">
        <el-input v-model="form.cweight"
                  placeholder="请填写"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>

      <el-form-item label="前超长（米）"
                    prop="preOverLength">
        <el-input v-model="form.preOverLength"
                  placeholder="请填写"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="后超长（米）"
                    prop="postOverLength">
        <el-input v-model="form.postOverLength"
                  placeholder="请填写"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="左超宽（米）"
                    prop="leftOverWidth">
        <el-input v-model="form.leftOverWidth"
                  placeholder="请填写"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="右超宽（米）"
                    prop="rightOverWidth">
        <el-input v-model="form.rightOverWidth"
                  placeholder="请填写"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="超高（米）"
                    prop="overHeight">
        <el-input v-model="form.overHeight"
                  placeholder="请填写"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <template v-if="showGoods">
        <div class="box-title">货信息</div>
        <el-form-item label="提单号"
                      prop="planGoods.billno">
          <el-input v-model="form.data"
                    @input="setbillno"
                    placeholder="请填写"
                    clearable
                    style="width:150px"></el-input>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'addGoods1',
  props: {
    showGoods: {
      default: true,
    },
    seeFlag: {
      default: true,
    },
  },
  watch:{
    form(){
      if(this.showGoods&&0===this.form.containerGoodList.length){
        this.form.containerGoodList=[]
        this.form.containerGoodList.push({ planGoods:{}})
        this.form.containerGoodList[0].planGoods.billno=''
      }else{
        // console.log(888)
        // console.log(this.form)
        this.$nextTick(()=>{
            this.$set(this.form,'data',this.form.containerGoodList[0].planGoods.billno)
            this.$forceUpdate()
        })
      }
      console.log(this.form)
      if(this.form.ctypecd&&this.form.cszCsizecd){
        this.form.typeSize=[this.form.ctypecd,this.form.cszCsizecd]
        
      }
    },
  },
  components: {},
  data() {
    return {
      form1: {},
      form: {
        attachOperation: 'WG',
        attachOperationName: '外港',
        containerGoodList: [],
        data:'',
      },
      rules: {
        cntrno: [{ required: true, message: '请输入箱号', trigger: 'blur' }],
        cstCopercd: [
          { required: true, message: '请选择持箱人', trigger: 'change' },
        ],
        internalfg: [
          { required: true, message: '请选择贸易类型', trigger: 'change' },
        ],
        potLdport: [
          { required: true, message: '请选择装货港', trigger: 'change' },
        ],
        potUnldport: [
          { required: true, message: '请选择卸货港', trigger: 'change' },
        ],
        potDstnport: [
          { required: true, message: '请选择目的港', trigger: 'change' },
        ],
        ctypecd: [
          { required: true, message: '请选择船公司箱型', trigger: 'change' },
        ],
        cweight: [
          { required: true, message: '请输入箱货总重（吨）', trigger: 'blur' },
        ],
      },
      dataList: {},
    }
  },

  methods: {
    getNowData(){
      return JSON.stringify(this.form)
    },
    setbillno(){
      if(undefined===this.form.containerGoodList){
        this.form.containerGoodList = []
        this.form.containerGoodList.push({
          planGoods: { billno: this.form.data },
        })
        
      }else{
        this.form.containerGoodList=[]
        this.form.containerGoodList.push({ planGoods:{}})
        this.$set(this.form.containerGoodList[0].planGoods,'billno',this.form.data)
        console.log(999)
        console.log(this.form)
      }
    },
    cstCopercd(val) {
      console.log(val);
      if(val){
        let label = this.dataList.cstCoperList.filter(item=>{
          return item.relationTenantId == this.form.cstCopercd
        })[0].relationTenantName
        this.$set(this.form,'cstCopercdName',label||'')
      }else{
        this.$set(this.form,'cstCopercdName','')
      }
    },
    internalfgChange(val) {
      console.log(val);
      if(val){
        let label = this.dataList.INTERNALFG_IM.filter(item=>{
          return item.lowValue == this.form.internalfg
        })[0].meaning
        this.$set(this.form,'internalfgName',label||'')
      }else{
        this.$set(this.form,'internalfgName','')
      }
    },
    potLdportChange(val) {
      console.log(val);
      if(val){
        let label = this.dataList.ports.filter(item=>{
          return item.portcd == this.form.potLdport
        })[0].portlocnnm
        this.$set(this.form,'potLdportName',label||'')
      }else{
        this.$set(this.form,'potLdportName','')
      }
    },
    potUnldportChange(val) {
      console.log(val);
      if(val){
        let label = this.dataList.ports.filter(item=>{
          return item.portcd == this.form.potUnldport
        })[0].portlocnnm
        this.$set(this.form,'potUnldportName',label||'')
      }else{
        this.$set(this.form,'potUnldportName','')
      }
    },
    potDstnportChnage(val) {
      console.log(val);
      if(val){
        let label = this.dataList.ports.filter(item=>{
          return item.portcd == this.form.potDstnport
        })[0].portlocnnm
        this.$set(this.form,'potDstnportName',label||'')
      }else{
        this.$set(this.form,'potDstnportName','')
      }
    },
    shippingTypeChange(val) {
      console.log(val);
      if(val){
        let label = this.dataList.SHIPPING_TYPE.filter(item=>{
          return item.lowValue == this.form.shippingType
        })[0].meaning
        this.$set(this.form,'shippingTypeName',label||'')
      }else{
        this.$set(this.form,'shippingTypeName','')
      }
    },
    dtpDnggcdChange(val) {
      console.log(val);
      if(val){
        let label = this.dataList.danger.filter(item=>{
          return item.dnggcd == this.form.dtpDnggcd
        })[0].dnggnm
        this.$set(this.form,'dtpDnggcdName',label||'')
      }else{
        this.$set(this.form,'dtpDnggcdName','')
      }
    },
    brkdmgcdChange(val) {
      console.log(val);
      if(val){
        let label = this.dataList.BRKDMGCD.filter(item=>{
          return item.lowValue == this.form.brkdmgcd
        })[0].meaning
        this.$set(this.form,'brkdmgcdName',label||'')
      }else{
        this.$set(this.form,'brkdmgcdName','')
      }
    },
    osdmgcfgChange(val) {
      console.log(val);
      if(val){
        let label = this.dataList.INDUSTRIAL_ORIGINAL_WASTE.filter(item=>{
          return item.lowValue == this.form.osdmgcfg
        })[0].meaning
        this.$set(this.form,'osdmgcfgName',label||'')
      }else{
        this.$set(this.form,'osdmgcfgName','')
      }
    },
    ovlmtcdChange(val) {
      console.log(val);
      if(val){
        let label = this.dataList.OVER_LMT_CD.filter(item=>{
          return item.lowValue == this.form.ovlmtcd
        })[0].meaning
        this.$set(this.form,'ovlmtcdName',label||'')
      }else{
        this.$set(this.form,'ovlmtcdName','')
      }
    },
    internalfg(prop) {
      this.form.internalfgName = prop.meaning
      this.form.internalfg = prop.lowValue
    },
    // potLdport() {
    //   //:label="item.meaning" :value="item.lowValue"
    //   this.form.potLdportName = item.meaning
    //   this.form.potLdport = item.lowValue
    // },
    ctypecd(cd){
      this.form.ctypecd=cd[0]
      this.form.cszCsizecd=cd[1]
      this.dataList.boxList.forEach(element => {
          if(this.form.ctypecd===element.containerType&&
          this.form.cszCsizecd===element.containerSize){
            console.log(888)
            console.log(element.isoCode)
            this.form.isocd=element.isoCode
            this.$forceUpdate()
          }
      });
      // this.dataList.boxList.forEach(item => {
      //   if(cd===item.containerType){
      //     //this.form.ctypecd=item.containerType
      //     this.form.cszCsizecd=item.containerSize
      //   }
      // });
    },
    re() {
      this.$forceUpdate()
    },
    getDate() {
      this.dataList = {
        INTERNALFG_IM: [],
        OVER_LMT_CD: [],
        DIRTYCD: [],
        ADDTIONALOPERATE: [],
        cus: [],
        boxSize: [],
        ports: [],
        hz: [],
        hd: [],
        danger: [],
        union: [],
        TMPT_UNIT: [],
        INDUSTRIAL_ORIGINAL_WASTE: [],
        BRKDMGCD: [],
      }
      //boxSize 箱型
      //cus 持箱人
      //shipNo 航名
      //INTERNALFG_IM 贸易类型
      //DIRTYCD 坏/污
      //ADDTIONALOPERATE 附加操作
      //SHIPPING_TYPE 运输方式
      //INDUSTRIAL_ORIGINAL_WASTE 工原残
      //TMPT_UNIT 温度单位
      //BRKDMGCD 残损代码
      this.$api
        .refCode({
          domain: 'BRKDMGCD',
        })
        .then((res) => {
          this.dataList.BRKDMGCD = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .refCode({
          domain: 'TMPT_UNIT',
        })
        .then((res) => {
          this.dataList.TMPT_UNIT = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .refCode({
          domain: 'INDUSTRIAL_ORIGINAL_WASTE',
        })
        .then((res) => {
          this.dataList.INDUSTRIAL_ORIGINAL_WASTE = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .refCode({
          domain: 'OVER_LMT_CD',
        })
        .then((res) => {
          this.dataList.OVER_LMT_CD = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .getDangerUnionno()
        .then((res) => {
          this.dataList.union = res.data
        })
        .catch()
      this.$api
        .voyagesPage({
          //termCode: 'HX',
          size: 999,
          current: 0,
        })
        .then((res) => {
          this.shipNo = res.data.records
        })
        .catch()
      this.$api
        .dangerCode()
        .then((res) => {
          this.dataList.danger = res.data.data
          this.$forceUpdate()
        })
        .catch()
        this.$api.port().then((res) => {
          this.dataList.ports = res.data.data
          this.$forceUpdate()
        }).catch()
      this.$api
        .customerByType({
          tenantTypeName: '货主',
        })
        .then((res) => {
          this.dataList.hz = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .customerByType({
          tenantTypeName: '货代',
        })
        .then((res) => {
          this.dataList.hd = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .getCustomerRelations({
          //termCode: 'HX',
        })
        .then((res) => {
          this.dataList.cstCoperList = res.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .containerTypeSizeInfo()
        .then((res) => {
          this.dataList.boxList = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .refCode({
          domain: 'DIRTYCD',
        })
        .then((res) => {
          this.dataList.DIRTYCD = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .refCode({
          domain: 'SHIPPING_TYPE',
        })
        .then((res) => {
          this.dataList.SHIPPING_TYPE = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .refCode({
          domain: 'ADDTIONALOPERATE',
        })
        .then((res) => {
          this.dataList.ADDTIONALOPERATE = res.data.data
          this.$forceUpdate()
        })
        .catch()
      this.$api
        .refCode({
          domain: 'INTERNALFG_IM',
        })
        .then((res) => {
          this.dataList.INTERNALFG_IM = res.data.data
          this.$forceUpdate()
        })
        .catch()
    },
  },

  computed: {},

  mounted() {
    this.getDate()
  },
}
</script>
<style lang='scss' scoped>
.box-title {
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 16px;
  line-height: 20px;
  padding-left: 10px;
  border-left: 5px solid #4980d5;
  margin-bottom: 10px;
}
</style>